<template>
  <div id="all">
    <div v-if="isMain">
      <el-card class="box-card" style="width: 1180px">
        <div class="search">
          <el-row gutter="24">
            <el-col :span="6">
              <el-input
                size="medium"
                v-model="query.ifNo"
                placeholder="反馈单号"
              ></el-input>
            </el-col>

            <el-col :span="8">
              <el-date-picker
                v-model="query.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始注册日期"
                end-placeholder="结束注册日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-col>

            <el-col :span="2">
              <el-button type="primary" size="medium" @click="loadInsFeedback"
                >查询</el-button
              >
            </el-col>

            <el-col :span="2">
              <el-button type="info" size="medium" @click="resetInput"
                >重置</el-button
              >
            </el-col>
          </el-row>
        </div>

        <!--表格-->
        <el-table :data="insFeedbackList" stripe style="width: 100%">
          <el-table-column prop="ifNo" label="反馈单号"> </el-table-column>
          <el-table-column prop="insNickname" label="巡检员"> </el-table-column>
          <el-table-column prop="insTel" label="手机号码"> </el-table-column>
          <el-table-column prop="geoModel" label="地磁"> </el-table-column>
          <el-table-column prop="pkNo" label="泊位编号"> </el-table-column>
          <el-table-column prop="ifFeedTime" label="反馈时间">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="#409EFF"
                @click="handleDetil(scope.row.ifId)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currentPage"
          :page-sizes="pageInfo.pageSizes"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        >
        </el-pagination>
      </el-card>
    </div>

    <div v-if="!isMain">
      <el-row gutter="24">
        <el-col :span="2">
          <el-button type="info" size="medium" @click="goBack">返回</el-button>
        </el-col>
      </el-row>
      <el-descriptions
        title="巡检员反馈详情"
        direction="vertical"
        :column="4"
        border
      >
        <el-descriptions-item label="反馈单号" :span="2">{{
          insFeedbackDetail.ifNo
        }}</el-descriptions-item>
        <el-descriptions-item label="巡检员" :span="2">{{
          insFeedbackDetail.insNickname
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号码" :span="2">{{
          insFeedbackDetail.insTel
        }}</el-descriptions-item>
        <el-descriptions-item label="反馈时间" :span="2">{{
          insFeedbackDetail.ifFeedTime
        }}</el-descriptions-item>
        <el-descriptions-item label="地磁" :span="2">{{
          insFeedbackDetail.geoModel
        }}</el-descriptions-item>
        <el-descriptions-item label="泊位编号" :span="2">{{
          insFeedbackDetail.pkNo
        }}</el-descriptions-item>
        <el-descriptions-item label="反馈内容" :span="2">{{
          insFeedbackDetail.ifContent
        }}</el-descriptions-item>
        <el-descriptions-item label="反馈图片" :span="2">
          <img
            :src="insFeedbackDetail.ifImg"
            style="width: 60px; height: 60px"
          />
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
export default {
  name: "Inspector",
  data() {
    return {
      insFeedbackList: [],
      pageInfo: {
        pageSizes: [5, 10, 20, 50],
        total: 0,
      },
      //封装的请求参数
      query: {
        currentPage: 1,
        pageSize: 5,
        ifNo: "",
        dateRange: [],
      },
      isMain: true,
      insFeedbackDetail: {},
    };
  },
  methods: {
    //当每页显示条数改变时
    handleSizeChange(size) {
      this.query.pageSize = size;
      this.loadInsFeedback();
    },
    //当页数改变时
    handleCurrentChange(currentPage) {
      this.query.currentPage = currentPage;
      this.loadInsFeedback();
    },
    //巡检员详情信息
    handleDetil(id) {
      this.isMain = !this.isMain;
      this.insFeedbackDetail =
        this.insFeedbackList[getArrayIndex(this.insFeedbackList, id)];
    },
    loadInsFeedback() {
      this.$axios.post("/admin/userfb/queryAllInsFB", this.query).then((res) => {
        this.insFeedbackList = res.data.data.insFeedbackVOS;
        this.pageInfo.total = res.data.data.total;
      });
    },
    resetInput() {
      this.query.ifNo = "";
      this.query.dateRange = [];
      this.loadInsFeedback();
    },
    goBack() {
      this.isMain = !this.isMain;
    },
  },
  mounted() {
    this.loadInsFeedback();
  },
};
function getArrayIndex(arr, obj) {
  var i = arr.length;
  while (i--) {
    if (arr[i].ifId === obj) {
      return i;
    }
  }
  return -1;
}
</script>

<style>
</style>